<template>
    <div>
        <el-container style="height: 100%;width: 100%;display: flex;flex-direction: column;">

          <!-- 头部 -->
          <el-header style="background-color: #545c64; color: #fff; padding: 0;height: 68px;">
              <el-row type="flex" justify="space-between">
                  <el-col :span="12" style="display: flex;margin-left: 18px;line-height: 68px;">
                      <h1 style="font-weight: normal;letter-spacing: 2px;">
                          <el-icon name="user"></el-icon>
                          管 理 员 系 统
                      </h1>
                  </el-col>

                  <el-col class="userInfo" :span="8">
                      <!-- 这里放置username信息 -->
                      <el-image
                        fit="cover"
                        :src="headUrl"
                        style="width: 56px;height: 56px;border-radius: 6px;"
                      ></el-image>
                      <h3 style="font-weight: normal;">你好，{{ username }}</h3>

                      <el-button type="info" @click="$router.push('/personal-management')">个人信息</el-button>
                      <el-button type="danger" @click="logout">退出登录</el-button>
                  </el-col>

              </el-row>
          </el-header>

          <!-- 中间区域 -->
          <el-container><!--  v-model="activeNames" @change="handleChange" -->

            <el-aside style="overflow: hidden;" width="200px">
              <el-menu :default-active="$route.path" router class="el-menu-vertical-demo" background-color="#545c64"
                      text-color="#fff" active-text-color="#ffd04b">

                <!-- 人员管理 -->
                <el-submenu index="people">
                  <template slot="title">
                    <span>人员管理</span>
                  </template>
                  <el-menu-item index="/admin-management">管理员管理</el-menu-item>
                  <el-menu-item index="/user-management">用户管理</el-menu-item>
                </el-submenu>

                <!-- 标签管理 -->
                <el-submenu index="label">
                  <template slot="title">
                    <span>标签管理</span>
                  </template>
                  <el-menu-item index="/label-manage">标签管理</el-menu-item>
                </el-submenu>

                <!-- 审核管理 -->
                <el-submenu index="audit">
                  <template slot="title">
                    <span>审核管理</span>
                  </template>
                  <el-menu-item index="/admininfo-audit">管理员审核</el-menu-item>
                  <el-menu-item index="/postinfo-audit">帖子审核</el-menu-item>
                  <el-menu-item index="/storyinfo-audit">故事审核</el-menu-item>
                  <el-menu-item index="/avatarinfo-audit">头像审核</el-menu-item>
                </el-submenu>

                <!-- 内容管理 -->
                <el-submenu index="content">
                  <template slot="title">
                    <span>内容管理</span>
                  </template>
                  <el-menu-item index="/delete-post">删除帖子</el-menu-item>
                  <el-menu-item index="/delete-story">删除故事</el-menu-item>
                </el-submenu>

                <!-- 日志查询 -->
                <el-submenu index="log">
                  <template slot="title">
                    <span>日志查询</span>
                  </template>
                  <el-menu-item index="/login-log">登录日志</el-menu-item>
                  <el-menu-item index="/operation-log">操作日志</el-menu-item>
                </el-submenu>
              </el-menu>
            </el-aside>

            <!-- 内容展示区域 -->
            <el-main>

              <!-- 组件路由出口 -->
              <router-view/>

            </el-main>
          </el-container>

        </el-container>
    </div>
</template>

<script>
import axios from 'axios'
import router from '@/router'
export default {
  data () {
    return {
      username: '',
      headUrl: ''
    }
  },

  created () {
    // 页面创建的时候，就请求该用户的信息
    this.getUsername()
  },

  methods: {
    // 请求用户信息
    async getUsername () {
      await axios.get('http://localhost:8080/pixington/system/manager/manager-details')
        .then((res) => {
          this.username = res.data.name
          this.headUrl = res.data.headUrl
        })
        .catch((err) => {
          console.log(err)
          this.$message({
            message: err,
            type: 'error',
            duration: 2000
          })
        })
    },

    // 退出登录
    async logout () {
      await axios.get('http://localhost:8080/pixington/system/manager/logout')
        .then((res) => {
          // 把本地的token删除
          localStorage.removeItem('access_token')
          sessionStorage.removeItem('access_token')

          this.$message({
            message: res.msg,
            duration: 2000,
            type: 'success'
          })

          // 跳转回登录页面
          setTimeout(() => {
            router.replace('/login')
          }, 2000)
        })
        .catch((err) => {
          console.log(err)
          this.$message({
            message: err,
            type: 'error',
            duration: 2000
          })
        })
    }
  }
}
</script>

<style>
/* 去掉默认的边框 */
.el-collapse-item__wrap > .el-collapse-item__content{
    padding: 0;
}

/* 选项字体 */
.el-menu > .el-menu-item{
    font-size: 14px;
}

.el-collapse-item{
    background-color: #999;
}

/* 每项与左边拉开距离 */
.el-collapse-item__header{
    padding-left: 18px;
}

.el-submenu__title{
  width:200px;
}

.userInfo{
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 68px;
  text-align: right;
  margin-right: 18px;
}
</style>
